
import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import instance from '../axios';
import '../css/cateList.css'
import { NavBar, SearchBar } from 'antd-mobile';

// 搜索后的页面
function SearchList() {
    const [value, setValue] = useState('');
    const [params, setParams] = useSearchParams()
    const searchTitle = params.get('id')
    const [list, setList] = useState([])
    useEffect(() => {
        const getList = () => {
            instance({
                url: `/getCatePro/?id=${searchTitle}`,
                method: 'get'
            }).then(res => {
                // 假设需要将数据设置到状态中
                setList(res.data.data);
            }).catch(error => {
                console.error("Failed to fetch data:", error);
            });
        }
        getList();
    }, [searchTitle])
    const [sort, setSort] = useState('');
    const [order, setOrder] = useState('');
    const handleSort = (type, order) => {
        setSort(type);
        setOrder(order);
        let newList = [...list];
        if (type === 'comment') {
            if (order === 'asc') {
                newList.sort((a, b) => b.evaluate.length - a.evaluate.length);
            }
        } else if (type === 'price') {
            newList.sort((a, b) => (order === 'asc' ? a.price - b.price : b.price - a.price));
        }
        setList(newList);
    }
    const navigate = useNavigate()
    const back = () => {
        navigate('/home')
    }

    return (<div>
        <NavBar onBack={back}></NavBar>
        {/* 搜索框 */}
        <div className="search-box">
            <SearchBar placeholder='请输入内容' showCancelButton autoFocus />
        </div>
        {/* 筛选条件 */}
        <div className="filter-box">
            <ul className="filter-ul">
                <li style={{ backgroundColor: sort === '' && order === '' ? '#1989fa' : '', color: sort === 'comment' && order === 'asc' ? '#fff' : '', borderRadius: '10px', padding: '0 5px' }}>默认排序</li>
                <li style={{ position: 'relative' }}>价格
                    <div style={{ position: 'absolute', top: '5px', right: '-18px', display: 'flex', flexDirection: 'column', alignItems: 'center', lineHeight: '10px' }}>
                        <i className='iconfont icon-xiangshangxiaojiantou_mianxing' aria-label="向上箭头" onClick={handleSort.bind(null, 'price', 'asc')} style={{ color: sort === 'price' && order === 'asc' ? '#fff' : '' }}></i>
                        <i className='iconfont icon-jiantouxia' aria-label="向下箭头" onClick={handleSort.bind(null, 'price', 'desc')} style={{ color: sort === 'price' && order === 'desc' ? '#fff' : '' }}></i>
                    </div>
                </li>
            </ul>
        </div>
        {/* 列表 */}
        <div className="list-box">
            <ul className='ul-list'>
                {list.map(t => <li key={t._id}>
                    <p><img src={t.img} alt="" width="120px" height="80px" /></p>
                    <p>
                        {t.name}<br /><br /><br />
                        <span style={{ color: 'red' }}>￥{t.price}</span>
                    </p>
                </li>)}
            </ul>
        </div>
    </div>
    )
}

export default SearchList